<template>
  <div class="map-container">
    <div class="map-header">
      <h2>位置分析地图</h2>
      <el-input v-model="searchLocation" placeholder="搜索位置" style="width: 200px;">
        <template #append>
          <el-button @click="searchMap" :icon="Search" type="primary" />
        </template>
      </el-input>
    </div>
    <div id="map" ref="mapContainer" class="map" :style="{ width: '100%', height: '400px' }"></div>
    <div class="map-legend">
      <div class="legend-item">
        <span class="legend-color high-potential"></span>
        <span>高潜力区域</span>
      </div>
      <div class="legend-item">
        <span class="legend-color medium-potential"></span>
        <span>中潜力区域</span>
      </div>
      <div class="legend-item">
        <span class="legend-color low-potential"></span>
        <span>低潜力区域</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Search } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'MapComponent',
  components: {
    Search
  },
  props: {
    // 可以接收来自父组件的地图配置
    mapConfig: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const mapContainer = ref(null)
    const searchLocation = ref('')
    let mapInstance = null

    // 初始化地图
    const initMap = () => {
      if (mapContainer.value && window.BMapGL) {
        // 这里假设使用百度地图API，实际项目中需要根据具体地图API进行调整
        mapInstance = new window.BMapGL.Map(mapContainer.value)
        const point = new window.BMapGL.Point(116.404, 39.915)
        mapInstance.centerAndZoom(point, 15)
        mapInstance.enableScrollWheelZoom(true)
        
        // 添加地图控件
        mapInstance.addControl(new window.BMapGL.NavigationControl())
        mapInstance.addControl(new window.BMapGL.ScaleControl())
        
        // 添加示例标记点
        addSampleMarkers()
      } else {
        // 如果没有地图API，使用模拟数据在控制台显示
        console.log('地图API未加载，显示模拟数据')
        simulateMapData()
      }
    }

    // 模拟地图数据
    const simulateMapData = () => {
      // 这里模拟一些区域潜力数据
      const potentialAreas = [
        { id: 1, name: '朝阳区CBD', score: 9.5, type: 'high' },
        { id: 2, name: '海淀区中关村', score: 8.7, type: 'high' },
        { id: 3, name: '西城区金融街', score: 8.2, type: 'medium' },
        { id: 4, name: '东城区王府井', score: 8.5, type: 'high' },
        { id: 5, name: '丰台区方庄', score: 7.2, type: 'medium' },
        { id: 6, name: '通州区梨园', score: 6.8, type: 'low' }
      ]
      console.log('潜在选址区域数据:', potentialAreas)
    }

    // 添加示例标记点
    const addSampleMarkers = () => {
      // 模拟一些潜在选址点
      const locations = [
        { lng: 116.404, lat: 39.915, name: '位置1', score: 9.2 },
        { lng: 116.414, lat: 39.925, name: '位置2', score: 8.5 },
        { lng: 116.394, lat: 39.905, name: '位置3', score: 7.8 }
      ]

      locations.forEach(location => {
        const point = new window.BMapGL.Point(location.lng, location.lat)
        const marker = new window.BMapGL.Marker(point)
        mapInstance.addOverlay(marker)
        
        // 添加信息窗口
        const infoWindow = new window.BMapGL.InfoWindow(`
          <div style="padding: 10px;">
            <h4>${location.name}</h4>
            <p>评分: ${location.score}/10</p>
            <button onclick="showDetails(${location.score})">查看详情</button>
          </div>
        `)
        
        marker.addEventListener('click', () => {
          mapInstance.openInfoWindow(infoWindow, point)
        })
      })
    }

    // 搜索地图
    const searchMap = () => {
      if (searchLocation.value) {
        if (mapInstance && window.BMapGL) {
          const localSearch = new window.BMapGL.LocalSearch(mapInstance, {
            onSearchComplete: (results) => {
              if (results && results.getNumPois() > 0) {
                const poi = results.getPoi(0)
                mapInstance.centerAndZoom(poi.point, 15)
                const marker = new window.BMapGL.Marker(poi.point)
                mapInstance.addOverlay(marker)
              } else {
                ElMessage.error('未找到该位置')
              }
            }
          })
          localSearch.search(searchLocation.value)
        } else {
          ElMessage.success(`搜索位置: ${searchLocation.value}`)
          console.log(`模拟搜索位置: ${searchLocation.value}`)
        }
      }
    }

    // 当组件挂载时初始化地图
    onMounted(() => {
      // 模拟加载地图API
      setTimeout(() => {
        initMap()
      }, 1000)
    })

    return {
      mapContainer,
      searchLocation,
      searchMap
    }
  }
}
</script>

<style scoped>
.map-container {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.map-header h2 {
  margin: 0;
  color: #333;
}

.map {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 15px;
}

.map-legend {
  display: flex;
  gap: 20px;
  font-size: 14px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.high-potential {
  background-color: #f56c6c;
}

.medium-potential {
  background-color: #e6a23c;
}

.low-potential {
  background-color: #67c23a;
}
</style>